<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <title>Update</title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="/editor/css/editormd.min.css">
    <script src="/editor/editormd.min.js"></script>
</head>
<body>
<main class="ui container segment">
    <form onsubmit="return false" class="ui form" id="article">
        <div class="field">
            <div id="editor-article">
                <textarea style="display: none"></textarea>
            </div>
        </div>
        <div class="button ui inverted green" v-on:click="send_article()"><i class="ui paper plane icon"></i>Post</div>
    </form>
</main>

<script>
    aid = location.pathname.split('/');
    aid = aid[aid.length - 1];
    var editor;

    var article = new Vue({
        el: "#article",
        data: {
            id: aid,
            text: "",
        },
        methods: {
            send_article() {
                if (this.title == "") {
                    alert("Title cannot be empty");
                    return;
                }
                this.text = editor.getMarkdown();
                if (this.text.length < 15) {
                    alert("content too short! At least 15 letters");
                    return;
                }
                axios.post("/api/problems/analysis/edit/" + aid, {
                    text: this.text
                })
                    .then(function (res) {
                        if (res.data.code == 200) {
                            alert(res.data.message);
                            location.reload();
                        } else {
                            alert(res.data.message);
                        }
                    })
                    .catch(function (e) {
                        console.log(e);
                    }).finally(function () {
                    ;
                });
            }
        },
        created() {
            let that = this;
            axios.get("/api/problems/analysis/edit/" + aid)
                .then(function (res) {
                    if (res.data.code == 200) {
                        that.text = res.data.data.text;
                        $(function () {
                            editor = editormd({
                                id: "editor-article",
                                path: "/editor/lib/",
                                pluginPath: "/editor/plugins/",
                                height: 800,
                                autoFocus: false,
                                markdown: that.text,
                                tocTitle: "目录",
                                pageBreak: true,
                                atLink: true,    // for @link
                                emailLink: true,    // for mail address auto link
                                tex: true,
                                taskList: true,   // Github Flavored Markdown task lists
                                flowChart: true,
                                sequenceDiagram: true,
                                previewCodeHighlight: true,
                                imageUploadURL: "/api/media/upload",
                                imageUpload: true,
                                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "ico", "JPG", "JPEG", "PNG"],
                            });
                        });
                    }
                })
                .catch(function (e) {
                    console.log(e)
                    if (e.response.status == 404) {
                        location.href = "4O4";
                    }
                });
        }
    });
</script>
</body>
</html>